<template>
  <div class="app-container">
    <span v-if="roleFlag === 4" class="street-name">{{ street }} / <span class="community-name">{{ selectCommunityName || '全部' }}</span></span>
    <span v-if="roleFlag === 3" class="street-name">{{ street }}</span>

    <div style="margin-top: 15px">
      <img class="total-img" src="../../assets/bg-title.png" alt="">
      <div class="total-box">
        <div class="total-item">
          <span class="count">{{ countInfo.newIsolateCount }}</span>
          <span class="count-name">新增隔离</span>
        </div>
        <div class="total-item">
          <span class="count">{{ countInfo.totalIsolateCount }}</span>
          <span class="count-name">当前隔离</span>
        </div>
        <div class="total-item">
          <span class="count">{{ countInfo.normalIsolateCount }}</span>
          <span class="count-name">隔离正常</span>
        </div>
        <div class="total-item">
          <span class="count">{{ countInfo.unusualIsolateCount }}</span>
          <span class="count-name">隔离异常</span>
        </div>
      </div>
      <div class="flex-box">
        <div class="select-box">
          <div v-if="roleFlag === 4" class="mar10">
            <p class="select-name">社区</p>
            <el-select v-model="communityId" placeholder="请选择" size="medium" @change="selectCommunity()">
              <el-option
                v-for="item in communityOption"
                :key="item.id"
                :label="item.street"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="mar10">
            <p class="select-name">网格</p>
            <el-select v-model="gridId" placeholder="请选择" size="medium" @change="selectGrid()">
              <el-option
                v-for="item in gridOption"
                :key="item.id"
                :label="item.gridName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="mar10">
            <p class="select-name">网格员</p>
            <el-select v-model="gridMgrUserId" placeholder="请选择" size="medium">
              <el-option
                v-for="item in userGridMgrOption"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="mar10">
            <p class="select-name">人员状态</p>
            <el-select v-model="isolatorStatus" placeholder="请选择" size="medium">
              <el-option
                v-for="item in statusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="exportData">导出</el-button>
        </div>

      </div>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      :header-cell-style="getRowClass"
    >
      <el-table-column label="人员姓名">
        <template slot-scope="scope">
          {{ (scope.row.realName === scope.row.ownerRealName) ? scope.row.realName : (scope.row.realName+'('+scope.row.ownerRealName+')') }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备号" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.deviceId }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="电量">
        <template slot-scope="scope">
          <span>{{ scope.row.power || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="心率" align="center">
        <template slot-scope="scope">
          {{ scope.row.heartRate || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="体温" align="center">
        <template slot-scope="scope">
          {{ scope.row.temperature || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="所在位置" align="center">
        <template slot-scope="scope">
          {{ scope.row.address + scope.row.building }}
        </template>
      </el-table-column>
      <el-table-column label="隔离时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.alreadyIsolateTime || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="归属社区" align="center">
        <template slot-scope="scope">
          {{ scope.row.communityName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="社区管理员" align="center">
        <template slot-scope="scope">
          {{ scope.row.communityMgrName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="归属网格" align="center">
        <template slot-scope="scope">
          {{ scope.row.gridName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="网格管理员" align="center">
        <template slot-scope="scope">
          {{ scope.row.gridMgrName || '-' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="隔离状态" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.isolateStatusDesc === '正常'? 'green' : 'red' ">{{ scope.row.isolateStatusDesc || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="佩戴状态" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.wearingStatusDesc === '佩戴正常'? 'green' : 'red' ">{{ scope.row.wearingStatusDesc || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        :current-page="pageNumber"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="jumper, prev, pager, next, sizes, total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getIsolatorList, getCountIsolateInfo, getQueryConditionData, exportIsolatorList } from '@/api/staff'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      list: null,
      total: 0,
      pageNumber: 1, // 当前页码
      pageSize: 10, // 默认多少页
      listLoading: true,
      communityId: '', // 社区id
      gridId: '', // 网格id
      gridMgrUserId: '', // 网格员
      isolatorStatus: '', // 人员状态
      communityOption: [],
      gridOption: [],
      userGridMgrOption: [],
      communityList: [], // 存储原始数据
      userGridMgrList: [],
      gridList: [],
      statusOption: [
        { value: 0, label: '正常' },
        { value: 1, label: '异常' }
      ],
      countInfo: {
        newIsolateCount: 0,
        normalIsolateCount: 0,
        totalIsolateCount: 0,
        unusualIsolateCount: 0
      },
      selectCommunityName: ''
    }
  },
  computed: {
    ...mapGetters([
      'street',
      'roleFlag' // 3社区管理员，4超级管理员(街道)
    ])
  },
  created() {
    this.fetchData()
    this.getCountIsolateInfo()
    this.getQueryConditionData()
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#F5F7FA;color:rgba(16,30,61,1);font-size:14px;font-weight:550;'
      } else {
        return ''
      }
    },
    fetchData() {
      this.listLoading = true
      const data = {
        communityId: this.communityId,
        gridId: this.gridId,
        gridMgrUserId: this.gridMgrUserId,
        isolatorStatus: this.isolatorStatus,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      getIsolatorList(data).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 获取统计隔离信息
    getCountIsolateInfo() {
      const data = {
        communityId: this.communityId,
        gridId: this.gridId,
        gridMgrUserId: this.gridMgrUserId
      }
      getCountIsolateInfo(data).then(res => {
        this.countInfo = res.data
      })
    },
    // 获取查询条件的数据
    getQueryConditionData() {
      getQueryConditionData().then(res => {
        const data = res.data
        this.communityList = data.communityList
        this.gridList = data.gridList
        this.userGridMgrList = data.userGridMgrList
        this.communityOption = data.communityList
        this.gridOption = data.gridList
        this.userGridMgrOption = data.userGridMgrList
      })
    },
    selectCommunity() {
      // 防止反选，清空数据
      this.gridId = ''
      this.gridMgrUserId = ''
      this.userGridMgrOption = []
      const obj = this.communityList.find(t => t.id === this.communityId)
      this.selectCommunityName = obj.street
      // 筛选出网格
      const grid = this.gridList.filter(item => item.refCommunityId === this.communityId)
      this.gridOption = grid
    },
    selectGrid() {
      this.gridMgrUserId = ''
      // 筛选网格员
      const userObj = this.gridList.find(t => t.id === this.gridId)
      const userOption = this.userGridMgrList.filter(item => item.userId === userObj.gridMgrUserId)
      this.userGridMgrOption = userOption
    },
    exportData() {
      const data = {
        communityId: this.communityId,
        gridId: this.gridId,
        gridMgrUserId: this.gridMgrUserId,
        isolatorStatus: this.isolatorStatus,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      exportIsolatorList(data).then(res => {
        const content = res
        const blob = new Blob([content])
        const fileName = '人员信息.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    searchData() {
      this.pageNumber = 1
      this.fetchData()
      this.getCountIsolateInfo()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.street-name {
  font-size:12px;
  font-weight:400;
  color:rgba(168,168,168,1);
  line-height:14px;
  margin-bottom: 15px;
}
.community-name {
  color: #101E3D
}
.total-img {
  width: 100%;
  height: 143px;
}
.total-box {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 143px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.total-item {
  display: flex;
  flex-direction: column;
}
.count {
  font-size:30px;
  font-weight:500;
  color:rgba(255,255,255,1);
  line-height:42px;
}
.count-name {
  font-size:14px;
  font-weight:400;
  color:rgba(255,255,255,.66);
  line-height:20px;
}
.select-name {
  font-size:12px;
  font-weight:400;
  color:rgba(16,30,61,.5);
  line-height:14px;
}
.flex-box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}
.select-box {
  display: flex;
}
.mar10 {
  margin-right: 10px;
}
.page-box {
  margin-top: 15px;
  text-align: right;
}
.green {
  color: #20AC70;
}
.red {
  color: #EA4646;
}
</style>
